<template>
	<el-menu :default-active="defaultActive" router="router" class="el-menu-vertical-demo">
		<template v-for="(item,rindex) in data" :key="rindex">
			<el-menu-item v-if="!item[children] || !item[children].length" :index="item[index]">
				<component v-if="item[icon]" :is="`el-icon${toLine(item[icon])}`"></component>
				<span>{{item[name]}}</span>
			</el-menu-item>
			<el-sub-menu v-if="item[children] && item[children].length" :index="item[index]">
				<template #title>
					<component v-if="item[icon]" :is="`el-icon${toLine(item[icon])}`"></component>
					<span>{{item[name]}}</span>
				</template>
				<el-menu-item v-for="(mitem,mindex) in item[children]" :index="mitem[index]" :key="mindex">
					<component v-if="mitem[icon]" :is="`el-icon${toLine(mitem[icon])}`"></component>
					<span>{{mitem[name]}}</span>
				</el-menu-item>
			</el-sub-menu>
		</template>
	</el-menu>
</template>

<script setup lang="ts">
	import type { PropType } from 'vue'
	import type { menuItem } from './type'
	import { toLine } from '../../../utils'

	let props = defineProps({
		data: {
			type: Array as PropType<any[]>,
			require: true
		},
		// 默认选中的菜单
		defaultActive: {
			type: String,
			default: ''
		},
		// 是否是路由模式
		router: {
			type: Boolean,
			default: false
		},
		//使用自定义的数据结构进行菜单处理
		name:{
			type:String,
			default:'name'
		},
		index:{
			type:String,
			default:'index'
		},
		icon:{
			type:String,
			default:'icon'
		},
		children:{
			type:String,
			default:'children'
		}
	})
	// console.log(props.data)
</script>

<style scoped lang="scss">
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
	svg {
		margin-right: 4px;
	}
</style>